<template>
    <div :class="wrapClasses" :style="styles">
        <vxe-table
          ref="xTable"
          border
          stripe
          resizable
          size="small"
          :loading="tableLoading"
          :height="tableHeight"
          :data="tableData"
          highlight-current-row
          :keyboard-config="{isArrow: true}"
          :show-footer="isShowFooter"
          :footer-method="footerMethod"
          >
          <!--      :scroll-y="{enabled: false}"
               :tooltip-config="{contentMethod: showTooltipMethod, enterable: true}"                  :show-overflow="config.isShowOneRow ? 'tooltip' : false"
                :formatter="config.formatFun" -->
            <vxe-column v-if="isRowOrder" fixed="left" type="seq" width="60px"></vxe-column>
            <vxe-column v-if="isCheckBox" fixed="left" type="checkbox" width="60px"></vxe-column>
            <!-- :filters="config.filters" -->
            <!-- 排序 -->
            <vxe-column
                v-for="config in tableColumnLocal"
                :visible="config.isHide"
                :key="config.key + config.sort.toString()"
                :type="config.type"
                :field="config.key"
                :title="config.title"
                :width="config.width"
                v-bind:[tableFixedTag(config)]="tableFixed(config)"
                >            
                <!-- 内容插槽 -->
                <template #default="{ row, index }" v-if="config.defaultSlot">
                    <slot v-bind:header="{ row, index }" :name="config.defaultSlot"></slot>
                </template>
                <!-- 表头插槽 -->
                <template #header v-if="config.tableSort">
                    <div class="cs-table-sort" @click="changeSort(config)">
                        <div class="sort-key">{{config.title}}</div>
                        <div class="sort-icon">
                            标记 {{config.tableSortNum}}
                            <div v-if="config.tableSort == 2" class="">升</div>
                            <div v-else-if="config.tableSort == 3" class="">降</div>
                        </div>
                    </div>
                </template>
            </vxe-column>
            <vxe-column v-if="isTableOption" fixed="right">
                <template #default="{ row, index }">
                    <slot v-bind:header="{ row, index }" name="TableOption"></slot>
                </template>
            </vxe-column>
            <!-- 空数据 -->
            <template #empty>
                <p>没有更多数据了！</p>
            </template>
        </vxe-table>
    </div>    
</template>

<script>
// 自定义表格
const prefixCls = 'jlg-table';
import Sortable from "sortablejs";

export default {
    name: 'cs-table',
    props: {
        styles: {},
        customClass: { type: String , default:'jlg-table' },
        // 表格数据
        tableRefName:{ type:String },
        // 表格数据
        tableData:[],
        /**
         * 表格排序
         * columnWidth 列宽 
         * leftFixedColumn 左固定
         * showColumn 显示列
         * soltName 字段插槽名称
         * isSort 排序
         * columnName 名称 
         * isShowOneRow 换行
         * headSlot 
         * headSlotName
         * footSlot
         * footSlotName
         * rowSlot
         * rowSlotName
         * */ 
        // 合计
        footerMethod:{},
        isShowFooter:{default:true},
        tableColumn:[],
        // 拓展信息
        tableExpand:{type:Boolean},
        // 列单击事件
        tableClickEvent:{type:String},
        // 列双击事件   
        tableDblclickEvent:{type:String},
        // 表尾合计
        tableTotal:{type:Boolean},
        // 表尾合计列
        tableTotalColumn:{type:Array},
        // 是否横向滚动 （自动填充当前容器）
        isHorizontalScroll:{type:Boolean,default:true},
        // 表格高度
        tableHeight:{type:String,default: '500px'},
        // 导入 导出
        isExclExpert:{type:Boolean},
        // 表头合并
        tableColumnMerge:{type:Boolean},
        // 表格内容编辑
        isTableEdit:{type:Boolean},
        // 表格复选框
        isCheckBox:{type:Boolean,default:false},
        // 表格行顺序
        isRowOrder:{type:Boolean,default:false},
        // 表格行顺序
        isTableOption:{type:Boolean,default:false},
        // 是否开启拖拽
        isTableColumnDrop:{type:Boolean},
        isTableRowDrop:{type:Boolean},
        // 排序 0-不开启 1-单列排序 2-多列排序
        tableSort:{type:Number,default:2},
        // 表格加载
        tableLoading:{type:Boolean},
        // 表格加载
        treeData:{type:Boolean},
        // 表格加载
        isTableOption:{type:Boolean},
    },
    data: () => {
        return {
            // isShowFooter:true,
            prefixCls: prefixCls,
            tableColumnLocal:{}
        };
    },
    computed: {
        wrapClasses() {
            return [`${prefixCls}`, {}];
        },
    },
    methods: {
        changeSort(column){
            switch (column.tableSort){
                case 1:{
                    column.tableSort += 1;
                    // 获取排序的最大数
                    let maxSort = 0;
                    this.tableColumnLocal.map(item=>{
                        if(item.tableSortNum > maxSort){
                            maxSort = item.tableSortNum;
                        }
                    });
                    column.tableSortNum = maxSort == 0 ? 1 : maxSort + 1;
                }
                break;
                case 2:{
                    column.tableSort += 1; 
                }
                break;
                case 3:{
                    column.tableSort = 1;
                    this.tableColumnLocal.map(item=>{
                        if(item.tableSortNum > column.tableSortNum){
                            item.tableSortNum -= 1;
                        }
                    });
                    column.tableSortNum = null;
                }
                break;
            }
        },
        compare(property){
          return function(a,b){
              var value1 = a[property];
              var value2 = b[property];
              return value1 - value2;
          }
        },
        tableFixedTag(config){
            if(config.rightFixed || config.leftFixed){
                return 'fixed';
            } else {
                return 'none';
            }
        },
        tableFixed(config){
            if(config.leftFixed){
                return 'left';
            }
            if(config.rightFixed){
                return 'right';
            }
            return false;
        },
        showTooltipMethod ({ type, column, row, items, _columnIndex }) {
            const { property } = column;
            // 重写默认的提示内容
            if (property === 'role' || property === 'date') {
                if (type === 'header') {
                    return column.title ? '自定义标题提示内容：' + column.title : ''
                } else if (type === 'footer') {
                    return items[_columnIndex] ? '自定义表尾提示内容，\n并且自定义换行：\n' + items[_columnIndex] : ''
                }
                return row[property] ? '自定义提示内容：' + row[property] : ''
            } else if (property === 'rate') {
                // 返回空字符串，控制单元格不显示提示内容
                return '';
            }
            // 其余的单元格使用默认行为
            return null;
        },
        refreshColumn(){
            this.tableColumnLocal =  JSON.parse(JSON.stringify(this.tableColumn));
            // this.$refs.xTable.refreshColumn();
            this.$nextTick(()=>{
                this.$refs.xTable.refreshColumn();
            });
        },
        columnDrop2 () {
            this.$nextTick(() => {
                const $table = this.$refs.xTable
                this.sortable2 = Sortable.create(
                    $table.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'), {
                        handle: '.vxe-header--column',
                        // handle: '.vxe-header--column:not(.col--fixed)',
                        onEnd: ({ newIndex, oldIndex }) => {
                            // console.log(newIndex, oldIndex);
                            // const { fullColumn, tableColumn } = $table.getTableColumn();
                            // const targetThElem = item;
                            // const wrapperElem = targetThElem.parentNode;
                            // const newColumn = fullColumn[newIndex];
                            // if (newColumn.fixed) {
                            //     // 错误的移动
                            //     if (newIndex > oldIndex) {
                            //         wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex])
                            //     } else {
                            //         wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
                            //     }
                            //     return this.$XModal.message({ content: '固定列不允许拖动！', status: 'error' })
                            // }
                            // // 转换真实索引
                            // const oldColumnIndex = $table.getColumnIndex(tableColumn[oldIndex]);
                            // const newColumnIndex = $table.getColumnIndex(tableColumn[newIndex]);
                            // // 移动到目标列
                            // const currRow = fullColumn.splice(oldColumnIndex, 1)[0];
                            // fullColumn.splice(newColumnIndex, 0, currRow);
                            // $table.loadColumn(fullColumn);
                            this.tableColumnLocal.splice(newIndex, 0, this.tableColumnLocal.splice(oldIndex, 1)[0]);
                            var newArray = this.tableColumnLocal.slice(0);
                            this.tableColumnLocal = [];
                            this.$nextTick(()=> {
                                this.tableColumnLocal = newArray;
                                this.tableColumnLocal.map((item,index)=>{
                                    item.sort = index+1;
                                });
                            })
                            $table.refreshColumn();
                        }
                })
            })
        }
    },
    created() {
        this.tableColumnLocal = JSON.parse(JSON.stringify(this.tableColumn));
        this.tableColumnLocal =  this.tableColumnLocal.sort(this.compare('sort'));
        // 监听数据列拖拽
        this.columnDrop2();
    },
    beforeDestroy() {
        if (this.sortable2) {
            this.sortable2.destroy()
        }
    },
};

// <template>
//   <div class="cs-table">
//     <vxe-table
//         :align="allAlign"
//         :data="tableData">
//         <vxe-column type="seq" width="60"></vxe-column>
//         <vxe-column field="name" title="Name"></vxe-column>
//         <vxe-column field="sex" title="Sex"></vxe-column>
//         <vxe-column field="age" title="Age"></vxe-column>
//     </vxe-table>
//   </div>
// </template>

// <script>
//   export default{
//       data:()=>{
//           return {
//               tableData: [
//                 { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
//                 { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
//                 { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
//                 { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
//               ]
//           }
//       }
//   }
// </script>
// <style lang="less" scoped>
//     @import url('./index.less');
// </style>

</script>

<style>
/*滚动条整体部分*/
.jlg-table ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
/*滚动条的轨道*/
.jlg-table ::-webkit-scrollbar-track {
    background-color: #FFFFFF;
}
/*滚动条里面的小方块，能向上向下移动*/
.jlg-table ::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 5px;
    border: 1px solid #F1F1F1;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
.jlg-table ::-webkit-scrollbar-thumb:hover {
    background-color: #A8A8A8;
}
.jlg-table ::-webkit-scrollbar-thumb:active {
    background-color: #787878;
}
/*边角，即两个滚动条的交汇处*/
.jlg-table ::-webkit-scrollbar-corner {
    background-color: #FFFFFF;
}

.vxe-table--render-default .vxe-table--footer-wrapper{
    overflow-x: auto;
    overflow-y: auto;
}
</style>